<template>
  <div class="sygl-vue">
    <!-- 标题 -->
    <h2 class="section-title">溯源概览</h2>
    <el-row :gutter="24"> 
      <!-- 已溯源产品 -->
      <el-col :span="6"> <!-- 24栅格系统，4列平分则每列span=6 -->
        <div class="stat-card">
          <div class="card-header">
            
              <!-- 绿色叶子图标 -->
            <svg t="1754061863491" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15810" width="40" height="40"><path d="M716.8 341.32992C650.8032 275.33312 650.83392 168.36608 716.8 102.4c-282.66496 0-512 229.16096-512 512 0 169.66656 137.53344 307.2 307.2 307.2s307.2-137.53344 307.2-307.2c0-106.5984-32.53248-203.13088-102.4-273.07008zM558.36672 848.73216a642.36544 642.36544 0 0 1-27.09504-119.99232L665.6 594.40128l-48.27136-48.26112-91.65824 91.61728a645.2736 645.2736 0 0 1 49.39776-236.16512L512 375.47008c-23.42912 56.50432-39.33184 116.0704-47.69792 177.07008l-74.7008-74.67008-48.27136 48.27136 116.736 116.69504c-0.60416 69.56032 9.19552 139.9296 29.9008 209.28512C367.47264 840.02816 273.07008 738.03776 273.07008 614.4c0-204.9024 139.60192-377.8048 328.704-428.5952a238.98112 238.98112 0 0 0-2.74432 36.06528 235.60192 235.60192 0 0 0 69.49888 167.7312c68.096 68.16768 82.40128 159.85664 82.40128 224.79872 0 115.85536-82.93376 212.67456-192.5632 234.33216z" p-id="15811" fill="#2e7d32"></path></svg>
            <div class="card-title">已溯源产品</div>
          </div>
          <div class="card-value">{{ archiveCount }} <span class="danwei">个</span></div>
        </div>
      </el-col>

      <!-- 覆盖产业基地 -->
      <el-col :span="6">
        <div class="stat-card">
          <div class="card-header">
            
              <!-- 绿色定位图标 -->
            <svg t="1754062037539" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22603" data-spm-anchor-id="a313x.search_index.0.i17.48a23a81YBEuyU" width="40" height="40"><path d="M541.190891 1009.293248C544.52832 1005.885275 548.383707 1001.898704 552.713978 997.36109 565.025302 984.460186 578.71838 969.688892 593.450024 953.266626 635.514509 906.374618 677.575463 855.548152 716.899743 802.505285 772.694379 727.246301 818.336558 653.733231 850.310552 583.915306 882.791737 512.990107 900.380982 447.547911 900.380982 388.380982 900.380982 173.884097 726.496814 0 512 0 297.503186 0 123.619018 173.884097 123.619018 388.380982 123.619018 453.914994 148.112442 529.89656 192.638909 615.024269 222.801105 672.689965 261.563999 733.327147 306.917011 795.635831 346.163792 849.555204 388.144069 901.753449 430.125229 950.301866 444.824743 967.300737 458.485691 982.641645 470.765062 996.079009 475.081033 1000.802039 478.922121 1004.956003 482.24525 1008.510078 484.268362 1010.673642 485.687365 1012.175194 486.459184 1012.983838 500.133902 1027.31116 522.916683 1027.589594 536.93759 1013.600746 537.722472 1012.817576 539.154539 1011.372534 541.190891 1009.293248ZM537.540816 964.228432C536.933529 963.592087 535.680295 962.265819 533.824363 960.28098 530.682538 956.921044 527.024342 952.964783 522.892674 948.443587 511.036286 935.468873 497.80291 920.608075 483.539265 904.113199 442.768795 856.965196 401.997442 806.270003 364.009369 754.079684 320.553597 694.377636 283.599147 636.569422 255.210969 582.295634 215.493894 506.362491 194.233742 440.41104 194.233742 388.380982 194.233742 212.883532 336.502462 70.614724 512 70.614724 687.497538 70.614724 829.766258 212.883532 829.766258 388.380982 829.766258 436.039636 814.709257 492.060238 786.108175 554.512959 756.432867 619.311431 713.270146 688.831132 660.173876 760.450492 622.263303 811.586462 581.572627 860.7571 540.885482 906.113538 526.654144 921.978212 513.452721 936.219066 501.628286 948.609655 497.511094 952.924056 493.867022 956.692128 490.739495 959.885697 488.896804 961.767332 487.65681 963.018643 487.06241 963.611524L537.540816 964.228432ZM670.883129 388.380982C670.883129 300.632248 599.748681 229.497853 512 229.497853 424.251319 229.497853 353.116871 300.632248 353.116871 388.380982 353.116871 476.129715 424.251319 547.26411 512 547.26411 599.748681 547.26411 670.883129 476.129715 670.883129 388.380982ZM423.731595 388.380982C423.731595 339.631683 463.250772 300.112577 512 300.112577 560.749228 300.112577 600.268405 339.631683 600.268405 388.380982 600.268405 437.13028 560.749228 476.649387 512 476.649387 463.250772 476.649387 423.731595 437.13028 423.731595 388.380982Z" fill="#2e7d32" p-id="22604" data-spm-anchor-id="a313x.search_index.0.i18.48a23a81YBEuyU" class="selected"></path></svg>
            <div class="card-title">覆盖产业基地</div>
          </div>
          <div class="card-value">{{ areaCount }} <span class="danwei">个</span></div>
        </div>
      </el-col>

      <!-- 参与企业 -->
      <el-col :span="6">
        <div class="stat-card">
          <div class="card-header">
            
                <!-- 绿色建筑图标 -->
            <svg t="1754062108187" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25221" width="40" height="40"><path d="M426.666667 431.402667V42.666667l469.333333 256v597.333333H128V298.666667l298.666667 132.736z" fill="#2e7d32" p-id="25222"></path></svg>
            <div class="card-title">参与企业</div>
          </div>
          <div class="card-value">{{ comCount }} <span class="danwei">家</span></div> 
        </div>
      </el-col>

      <!-- 年度交易额 -->
      <el-col :span="6">
        <div class="stat-card">
          <div class="card-header">
            
              <!-- 绿色趋势图标 -->
            <svg t="1754062204722" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27750" width="40" height="40"><path d="M99.58015625 147.39411458c0-1.22878125 0.46846875-2.456625 1.40540625-3.39459375 0.937875-0.9369375 2.16571875-1.40540625 3.39459375-1.40540625h30.36768c1.22878125 0 2.456625 0.46846875 3.39459375 1.40540625 0.9369375 0.937875 1.40540625 2.16571875 1.40540625 3.39459375v741.26784h807.88128c1.22784375 0 2.4575625 0.46846875 3.3935625 1.4064375 0.937875 0.9369375 1.4064375 2.16571875 1.4064375 3.3935625v30.36768c0 1.22784375-0.46846875 2.4575625-1.4064375 3.3935625-0.9369375 0.937875-2.16571875 1.4064375-3.3935625 1.4064375H99.58016V147.39413333z" p-id="27751" data-spm-anchor-id="a313x.search_index.0.i24.48a23a81YBEuyU" class="selected" fill="#2e7d32"></path><path d="M192.34898634 303.23937256c0-3.03668118 1.15801907-6.0734396 3.47575665-8.38947774 2.31688786-2.31688786 5.35356904-3.47575664 8.38947772-3.47575664H312.21393233c3.03668118 0 6.0734396 1.15801907 8.38947773 3.47575664 2.31688786 2.31688786 3.47575664 5.35356904 3.47575664 8.38947773v558.96486329H192.34896162V303.23938801z" p-id="27752" data-spm-anchor-id="a313x.search_index.0.i23.48a23a81YBEuyU" class="selected" fill="#2e7d32"></path><path d="M586.35308197 467.90194351c0-3.03668118 1.15801907-6.0734396 3.47575664-8.38947773 2.31688786-2.31688786 5.35356904-3.47575664 8.38947773-3.47575665h107.99973633c3.03668118 0 6.0734396 1.15801907 8.38947773 3.47575665 2.31688786 2.31688786 3.47575664 5.35356904 3.47575664 8.38947773v394.3030957H586.35306961V467.9019466z" p-id="27753" data-spm-anchor-id="a313x.search_index.0.i26.48a23a81YBEuyU" class="selected" fill="#2e7d32"></path><path d="M348.10204064 617.84741718c0-3.23912659 1.23612671-6.47833557 3.70747376-8.94877625s5.71047364-3.70747375 8.94877624-3.70747375h115.19971875c3.23912659 0 6.47833557 1.23612671 8.94877625 3.70747375s3.70747375 5.71047364 3.70747375 8.94877625v244.9490625H348.10202087V617.84742707z" p-id="27754" data-spm-anchor-id="a313x.search_index.0.i25.48a23a81YBEuyU" class="selected" fill="#2e7d32"></path><path d="M745.67490069 797.2278579c0-3.03668118 1.15886879-6.0734396 3.47575665-8.38947774s5.35356904-3.47575664 8.38947773-3.47575664h107.99973632c3.03668118 0 6.0734396 1.15886879 8.38947773 3.47575664s3.47575664 5.35356904 3.47575665 8.38947774v64.97797851H745.67486979V797.2278548z" p-id="27755" data-spm-anchor-id="a313x.search_index.0.i27.48a23a81YBEuyU" class="selected" fill="#2e7d32"></path></svg>
            <div class="card-title">年度交易额</div>
          </div>
          <div class="card-value">--.-- <span class="danwei">亿</span> </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ElRow, ElCol, ElIcon } from 'element-plus'
import {countArchive,comcount} from '@/api/ncpsy/management/archive'
import { countArea } from '@/api/ncpsy/management/area'
const archiveCount = ref(0)
const areaCount = ref(0)
const comCount = ref(0)
// 调用 countArchive 接口
const fetchArchiveList = async () => {
  try {
    const res = await countArchive()
    console.log('接口返回数据:', res)
    archiveCount.value = res
  } catch (error) {
    console.error('调用接口失败:', error)
  }
}

// 调用 countArea 接口
const fetchAreaList = async () => {
  try {
    const res = await countArea(0)
    console.log('接口返回数据:', res)
    areaCount.value = res
  } catch (error) {
    console.error('调用接口失败:', error)
  }
}

// 调用 comcount 接口
const fetchComCount = async () => {
  try {
    const res = await comcount()
    console.log('接口返回企业用户数量:', res)
    comCount.value = res
  } catch (error) {
    console.error('调用接口失败:', error)
  }
}

fetchArchiveList()
fetchAreaList()
fetchComCount()



</script>

<style>
.sygl-vue {
  padding: 30px 60px; /* 与父容器保持间距 */
  background-color: #f9fafb;
  /* overflow-x: hidden; */
}

/* 标题样式 */
.section-title {
    text-align: left;
  font-size: 30px;
  font-weight: 500;
  color: #333;
  margin-bottom: 24px;
}

/* 统计卡片容器 */
.stat-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* 卡片头部（图标+标题） */
.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

/* 图标样式 */
.icon {
  font-size: 24px;
  margin-right: 8px;
}

/* 卡片标题 */
.card-title {
  font-size: 20px;
  color: #666;
}

/* 卡片数值 */
.card-value {
    text-align: left;
    font-size: 30px;
    font-weight: 500;
    color: #333;
}

.danwei{
    font-size: 20px;
    font-weight: 400;
    color: gray;
}
</style>